<template>
	<view class="order-detail-card requirement-desc-card">
		<text class="order-craftsman-title">订单描述</text>
		
		<text class="requirement-desc">当前，海外共建“一带一路”项目边防控、边生产，全力保障员工健康安全，努力满足当地生产需求，也把各国人民的心连接起来。</text>
		<view class="requirement-imgs">
			<view class="requirement-imgs-item" v-for="(item,index) in orderDetailImgs" :key="index">
				<hbxw-image
					:previewIndex="index"
					isNeedPriview 
					:priviewList="orderDetailImgs" 
					width="128rpx" 
					height="128rpx" 
					radius="8rpx" 
					mode="aspectFill"
					isNeedError
					isNeedLoading
					:src="item"
				/>
			</view>
		</view>
		<text class="order-craftsman-title order-date-title">订单信息</text>
		<view class="order-detail-date">
			<view class="order-detail-date-item">
				<text>订单编号：</text>
				<text>test23878923745</text>
			</view>
			<view class="order-detail-date-item">
				<text>下单时间：</text>
				<text>2024/05/10 10:23:01</text>
			</view>
			<view class="order-detail-date-item">
				<text>订单金额：</text>
				<text class="order-money">￥1200</text>
			</view>
			<view class="order-detail-date-item">
				<text>上门地址：</text>
				<text>张天师 珠海市香洲区前山幸福小区3栋303号房</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => null
			},
		},
		data() {
			return {
				orderDetailImgs: [
					'https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE',
					'https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE',
					'https://dummyimage.com/300x300/999999/ff4400.png?text=EXAMPLE2'
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
.order-detail-card{
	width: 100%;
	padding: 32rpx;
	box-sizing: border-box;
	border-radius: 12rpx;
	overflow: hidden;
	margin-bottom: 24rpx;
	background-color: #ffffff;
}
.order-craftsman-title{
	margin-bottom: 32rpx;
	font-size: 32rpx;
	font-weight: 500;
	color: #111111;
}
.requirement-desc-card{
	display: flex;
	flex-direction: column;
}
.requirement-desc{
	font-size: 30rpx;
	line-height: 42rpx;
	color: #303030;
}
.requirement-imgs{
	display: flex;
	flex-direction: row;
	margin-top: 24rpx;
	margin-bottom: 40rpx;
}
.requirement-imgs-item{
	margin-right: 12rpx;
	&:nth-last-of-type(1){
		margin-right: 0;
	}
}

.order-date-title{
	padding-top: 32rpx;
	border-top: 1px solid #E7E7E7;
}
.order-detail-date{
	display: flex;
	flex-direction: column;
}
.order-detail-date-item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32rpx;
	line-height: 40rpx;
	// &:nth-of-type(1){
	// 	margin-top: 24rpx;
	// }
	&:nth-last-of-type(1){
		margin-bottom: 48rpx;
	}
	text{
		font-size: 30rpx;
		color: #666666;
		&:nth-of-type(2){
			text-align: right;
			max-width: 460rpx;
			word-break: break-all;
			color: #111111;
		}
	}
	.order-money{
		font-weight: bold;
	}
}
</style>
